document.addEventListener('DOMContentLoaded', () => {
    // TypeScript code block
    const tsCodeBlock = document.getElementById('code-block-ts');
    tsCodeBlock.innerHTML = `
<pre><code>// Map转为Record
export function mapToRecord(myMap: Map<string, string>): Record<string, string> {
  return Object.fromEntries(myMap.entries()) as Record<string, string>;
}

// Record转为Map
export function recordToMap(myRecord: Record<string, string>): Map<string, string> {
  let myMap: Map<string, string> = new Map();
  for (const key in myRecord) {
    myMap.set(key, myRecord[key]);
  }
  return myMap;
}
</code></pre>
`;

    // ETS code block
    const etsCodeBlock = document.getElementById('code-block-ets');
    etsCodeBlock.innerHTML = `
<pre><code>import { mapToRecord, recordToMap } from './utils';

let res: Record<string, string> = { 'item1': '1', 'item2': '2' };
let myMap: Map<string, string> = recordToMap(res);
myMap.set('item3', '3'); // 添加元素
myMap.delete('item1'); // 删除元素
let myRecord = mapToRecord(myMap);

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Button('change Record')
          .onClick(() => {
            console.log('myRecord:', JSON.stringify(myRecord)); // myRecord: {"item2":"2","item3":"3"}
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}
</code></pre>
`;
});